<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
<style>
    .div_imgall {
        width: 100px;
        height: 100px;
        position: relative;
    }
    .input_flie {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 100;
        position: absolute;
        left: 0;
        top: 0;
    }
    .pre-pic{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
    }
</style>
<script>
    function showImg(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
</script>
<html>
<head>
    <title>i movie</title>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="layui-inline">
                <select  name="city" required lay-verify="required" id="city" lay-filter="city">
                    <option value="">城市</option>
                    <c:forEach items="${citys}" var="item">
                        <option value="${item.city_id}">${item.city_name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-inline">
                <select  name="area" required lay-verify="required" id="area">
                    <option value="">地区</option>

                </select>
            </div>
            <div class="layui-inline">
                <select  name="brand" required lay-verify="required" id="brand">
                    <option value="">品牌</option>
                    <c:forEach items="${years}" var="item">
                        <option value="${item.year_id}">${item.year_name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-inline">
                <select  name="type" required lay-verify="required" id="type">

                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <input type="text" name="address" required  lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label" style="width: 100px">联系方式</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label form-label" style="width: 100px">封面</label>
        <div class="layui-input-block">
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg(this)"  id="avatar" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg"/><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</form>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<script>
    $(function () {
        layui.use(['form', 'layer','laydate'], function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#time', //指定元素
                type: 'date',
            });
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                NProgress.start();
                var formData = new FormData();
                formData.append('avatar', $('#avatar')[0].files[0]);
                formData.append('city',data.field.city);
                formData.append('area',data.field.area);
                formData.append('name',data.field.name);
                formData.append('brand',data.field.brand);
                formData.append("type",data.field.type);
                formData.append('address',data.field.address);
                formData.append('phone',data.field.phone);
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/addCinema',
                    dataType: "json",
                    async:true,
                    contentType: false,
                    processData: false,
                    type:'POST',
                    data:formData,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            window.location.reload();
                        }
                    }
                });
                return false;
            });
            form.on('select(city)',function (data) {
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/data',
                    dataType: "json",
                    async:true,
                    data:{id:data.value},
                    success:function (data) {
                        console.log(data);
                        var html = template('temp1',{list:data.data.cinemaAreaList});
                        $('#area').append(html);
                        var html1 = template('temp2',{list:data.data.cinemaBrandList});
                        $('#brand').append(html1);
                        var html2 = template('temp3',{list:data.data.cinemaTypeList});
                        $('#type').append(html2);
                        form.render();
                    }
                    
                })
            })
        });
    })
</script>
<script type="text/html" id="temp1">
    {{each list item index}}
        <option value="{{item.id}}">{{item.district}}</option>
    {{/each}}
</script>
<script type="text/html" id="temp2">
    {{each list item index}}
    <option value="{{item.id}}">{{item.brand}}</option>
    {{/each}}
</script>
<script type="text/html" id="temp3">
    {{each list item index}}
    <option value="{{item.seat_type}}">{{item.seat_type}}</option>
    {{/each}}
</script>
</body>
</html>
